import * as React from 'react'
import { Modal, Form, Input, Button, Select, message } from 'antd'
import { FormInstance } from 'antd/lib/form'
import { ICompany } from '../../types'
import * as api from '../../services/api'

interface Props {
  record?: ICompany
  afterClose?: () => void
  getData: () => void
}

export default function Edit(props: Props): JSX.Element {
  const [visible, setVisble] = React.useState<boolean>(true)
  let formRef: FormInstance<ICompany> | null
  const isEdit: boolean = props.record ? true : false
  const close = () => {
    setVisble(false)
  }
  const summit = async (flag: boolean, id: string = '') => {
    const value = await formRef?.validateFields()
    try {
      if (flag) {
        await api.updateCompany({
          id: id,
          ...value
        })
        message.success('编辑成功')
        props.getData()
        close()
      } else {
        const res = await api.addcompany(value)
        if (res.stat === 'OK') {
          message.success('添加成功')
          props.getData()
          close()
        } else if (res.stat === 'ERR_EXISTS') {
          message.error('公司简称已存在，请换一个公司简称')
        }
      }
    } catch (error) {
      message.error(error)
    }
  }

  return (
    <Modal
      visible={visible}
      title={props.record ? '编辑公司' : '添加公司'}
      onCancel={close}
      maskClosable={false}
      afterClose={props.afterClose}
      destroyOnClose
      footer={[
        <Button type="text" key="cancel" onClick={() => close()}>
          取消
        </Button>,
        <Button type="primary" key="ok" onClick={() => summit(isEdit, props.record?._id)} disabled={false}>
          确认
        </Button>
      ]}
    >
      <Form initialValues={props.record} ref={(e) => formRef = e}>
        <Form.Item
          name="logo"
          label="logo"
          rules={[
            {
              required: true,
              message: '请上传公司logo'
            }
          ]}
        >
          <Input placeholder="请上传公司logo" />
        </Form.Item>
        {!isEdit && <Form.Item
          name="companyShortName"
          label="简称"
          rules={[
            {
              required: true,
              message: '请填写公司简称'
            }
          ]}
        >
          <Input placeholder="请填写公司简称" />
        </Form.Item>}
        <Form.Item
          name="companyFullName"
          label="名称"
          rules={[
            {
              required: true,
              message: '请填写公司名称'
            }
          ]}
        >
          <Input placeholder="请填写公司名称" />
        </Form.Item>
        <Form.Item
          name="companySize"
          label="规模"
          rules={[
            {
              required: true,
              message: '请选择公司规模'
            }
          ]}
        >
          <Select placeholder="请选择公司规模">
            <Select.Option value={1}>不限</Select.Option>
            <Select.Option value={2}>0-20人</Select.Option>
            <Select.Option value={3}>20-99人</Select.Option>
            <Select.Option value={4}>100-499人</Select.Option>
            <Select.Option value={5}>500-999人</Select.Option>
            <Select.Option value={6}>1000-9999人</Select.Option>
            <Select.Option value={7}>10000人以上</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="industryField"
          label="类别"
          rules={[
            {
              required: true,
              message: '请填写公司类别'
            }
          ]}
        >
          <Input placeholder="请填写公司类别" />
        </Form.Item>
        <Form.Item
          name="financeStage"
          label="融资"
          rules={[
            {
              required: true,
              message: '请选择融资情况'
            }
          ]}
        >
          <Select placeholder="请选择融资情况">
            <Select.Option value={1}>不限</Select.Option>
            <Select.Option value={2}>未融资</Select.Option>
            <Select.Option value={3}>天使轮</Select.Option>
            <Select.Option value={4}>A轮</Select.Option>
            <Select.Option value={5}>B轮</Select.Option>
            <Select.Option value={6}>C轮</Select.Option>
            <Select.Option value={7}>D轮及以上</Select.Option>
            <Select.Option value={8}>已上市</Select.Option>
            <Select.Option value={9}>不需要融资</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="describe"
          label="描述"
          rules={[
            {
              required: true,
              message: '请填写公司描述'
            }
          ]}

        >
          <Input.TextArea
            autoSize={{ minRows: 5 }}
            placeholder="请填写公司描述" />
        </Form.Item>
      </Form>
    </Modal>
  )
}
